<template>
    <div id="wrapper" class="container">
        <el-card class="box-card m-t m-b-lg">
            <div slot="header" class="clearfix">
                <el-page-header
                    @back="backToList"
                    :content="subProjectInfo.sub_project.name"
                >
                </el-page-header>
            </div>
            <el-row>
                <h3 class="m-b-lg">
                    <i class="el-icon-notebook-2"></i> 主项目基本信息
                </h3>
                <el-row class="m-t"
                    ><label class="label-bold m-b">项目名称</label>
                    <p class="f4">{{ projectBasicInfo.name }}</p></el-row
                >
                <el-row class="m-t"
                    ><label class="label-bold m-b">创建日期</label>
                    <p class="f4">{{ projectBasicInfo.create_date }}</p></el-row
                >
                <el-row class="m-t"
                    ><label class="label-bold m-b">项目概述</label>
                    <p class="f4 project-summary">
                        {{ projectBasicInfo.summary }}
                    </p></el-row
                >
            </el-row>
            <el-row v-if="subProjectInfo.bind_oa_project">
                <h3 class="m-b-lg">
                    绑定项目
                </h3>
            </el-row>
            <el-row v-if="!subProjectInfo.bind_oa_project">
                <h3 class="m-b-lg">
                    <i class="el-icon-s-management"></i>
                    版本信息
                </h3>
                <el-table
                    class="marT"
                    size="mini"
                    :data="subProjectInfo.history"
                    :border="true"
                    :header-cell-style="{ background: '#eef1f6' }"
                    style="width: 100%; margin-bottom: 15px"
                >
                    <el-table-column align="center" width="150px" label="版本">
                        <template slot-scope="scope">
                            {{ scope.row.version || '无' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="150px"
                        align="center"
                        property="form_status[1]"
                        label="状态"
                    ></el-table-column>
                    <el-table-column
                        width="200px"
                        align="center"
                        property="business_group"
                        label="事业群"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        property="project_manager"
                        label="项目经理"
                    ></el-table-column>
                    <el-table-column
                        width="80px"
                        align="center"
                        property="income_distribution.length"
                        label="拆分数量"
                    ></el-table-column>
                    <el-table-column
                        width="150px"
                        align="center"
                        property="form_status[0]"
                        label="类型"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        property="created_at"
                        label="立项/变更日期"
                    ></el-table-column>
                    <!-- <el-table-column
                        align="center"
                        property="changed_at"
                        label="变更日期"
                    ></el-table-column> -->
                    <!-- <el-table-column
                        align="center"
                        property="submitter"
                        label="创建人"
                        width="150px"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.creator_name }}
                            {{ scope.row.creator_ldap }}
                        </template>
                    </el-table-column> -->
                    <el-table-column width="350px" label="操作">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button
                                    type="primary"
                                    size="mini"
                                    @click="viewProject(scope.row.id)"
                                >
                                    查看
                                </el-button>
                                <el-button
                                    type="primary"
                                    size="mini"
                                    :disabled="!scope.row.workflow_link"
                                    @click="
                                        viewWorkflowRequest(
                                            scope.row.workflow_link
                                        )
                                    "
                                >
                                    OA流程
                                </el-button>
                                <el-button
                                    type="primary"
                                    size="mini"
                                    @click="editProject(scope.row.id)"
                                    :disabled="!scope.row.can_edit"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    type="primary"
                                    size="mini"
                                    @click="changeProject(scope.row.id)"
                                    :disabled="!scope.row.can_change"
                                >
                                    变更
                                </el-button>
                                <el-button
                                    :disabled="scope.row.status !== '待提交'"
                                    type="danger"
                                    size="mini"
                                >
                                    删除
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>
    </div>
</template>

<style>
.container {
    padding: 32px 32px 0 32px;
}

.container h3 {
    font-weight: 600;
}

.page-title-holder {
    border-bottom: 1px solid #dbdbdb;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-lg {
    margin-bottom: 35px;
}

.m-t {
    margin-top: 15px;
}

.page-title {
    margin: 16px 0;
    font-size: 1.75em;
    font-weight: 600;
    color: #303030;
}

.page-title-controls {
    margin-left: auto;
}

.label-bold {
    font-weight: 600;
}

.f4 {
    font-size: 16px !important;
    font-weight: 400;
}

.project-summary {
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>

<script>
export default {
    data() {
        return {
            projectId: this.$route.params.id,
            subProjectId: this.$route.params.subProjectId,
            projectBasicInfo: {},
            subProjectInfo: { sub_project: { name: '' } },
            tableData: []
        };
    },
    methods: {
        getProject() {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/parent_project/${this.projectId}`
                )
                .then(response => {
                    this.projectBasicInfo = response.data;
                });
        },
        getSubProject() {
            this.$axios
                .get(
                    `${process.env.VUE_APP_PROJECT_REQUEST_HOST}/api/base/sub/${
                        this.subProjectId
                    }`
                )
                .then(response => {
                    this.subProjectInfo = response.data.data;
                });
        },
        canAddSubProject(phaseId, projectCount) {
            if (projectCount === 0) {
                return true;
            } else {
                return false;
            }
        },
        backToList() {
            this.$router.back();
        },
        rowStyle(row, rowIndex) {
            return { height: '55px' };
        },
        viewWorkflowRequest(url) {
            window.open(url, '_blank');
        },
        editProject(formId) {
            this.$router.push({
                name: 'edit',
                params: { id: formId }
            });
        },
        changeProject(formId) {
            this.$axios
                .post(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/workflow/change`,
                    {
                        form_id: formId
                    }
                )
                .then(response => {
                    if (response.data.code === 200) {
                        this.$message.info('已存在未提交变更表单');
                    } else if (response.data.code === 201) {
                        this.$router.push({
                            name: 'edit',
                            params: { id: response.data.data }
                        });
                    }
                });
        }
    },
    created() {
        this.getProject();
        this.getSubProject();
    }
};
</script>
